<template>
  <view>
    <view
        class="flex justify-center align-center relative bg-fff sticky z-3 "
        id="container"
        :style="{top:`${top}px`}"
    >
      <!--骨架屏-->
      <view v-if="loading">
        <view class="flex align-center justify-center pb-30 pt-50">
          <view class="h-60 w-200 br-5 bg-f4f7f4"> </view>
          <view class="w-30 h-5 br-5 m-lr-10"></view>
          <view class="h-60 w-200 br-5 bg-f4f7f4"></view>
        </view>
      </view>

      <date-picker
          v-if="!loading"
          class="datePicker z-999"
          @changeTime="changeTime"
      >
      </date-picker>
    </view>
    <!--骨架屏-->
    <list-skeleton v-if="loading"></list-skeleton>
    <view v-else-if="maintenanceList.length && !loading">
      <view
          class="m-lr-20 mb-30 pl-20 h-265 flex align-center justify-between bg-E9F8FF br-10"
          v-for="item in maintenanceList"
          :key="item.workOrderId"
          @tap="clickItem(item)"
      >
        <view class="flex flex-column oh">
          <text class="fz-40 font-bold lh-56 mt-12 text-ellipsis">{{ item.workOrderName || '-'}}</text>
          <text class="fz-32 lh-45 mt-20 text-ellipsis">保养工程师：{{item.mroUser || '-'}}</text>
          <view class="flex mt-20">
            <text class="fz-32 lh-45">
              起止时间：
            </text>
            <view class="flex flex-column fz-32 lh-45">
              <text>{{ timeFormat(item.workOrderStartDate, item.workOrderStartTime)}}</text>
              <text class="mt-10">{{ timeFormat(item.workOrderEndDate, item.workOrderEndTime)}}</text>
            </view>
          </view>
        </view>
        <view class="relative mr-30">
          <CustomCircleProgress
              :border-width="8"
              :size="128"
              :percent="100"
              :active-color="textColor(item.status)"
          >
            <view class="h-full w-full lh-center">
              <text class="fz-30" :style="{'color':textColor(item.status)}">{{showContent(item.status)}}</text>
            </view>
          </CustomCircleProgress>
        </view>
      </view>
    </view>
    <empty-icon v-else></empty-icon>
  </view>
</template>

<script>
import CustomCircleProgress from '../../components/CustomCircleProgress'
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import { finishList, myFinishList } from "@/api/maintenance/task";
import DatePicker from "@/components/DatePicker/DatePicker";
import dayjs from '@/libs/dayjs.min.js'
import ListSkeleton from "../../components/ListSkeleton";
import { MAINTENANCE_ORDER_STATUS } from '@/utils/dict'

export default {
  name: "maintenanceDone",
  components: {ListSkeleton, EmptyIcon, DatePicker, CustomCircleProgress},
  mixins:[getNavBarHeight],
  data() {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      maintenanceList:[],
      startTime: '',
      endTime: '',
      loading: true,
    }
  },
  created(){
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.maintenanceList = res.rows
    }).finally(() => {
      this.loading = false
    })
  },
  methods:{
    show(){
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.maintenanceList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    hide(){
      this.loading = true
    },
    textColor(status){
      if(status===MAINTENANCE_ORDER_STATUS[5].value){
        return '#2d8df2'
      }
      return '#19BE6B'
    },
    showContent(status){
      if(status === MAINTENANCE_ORDER_STATUS[4].value){
        return MAINTENANCE_ORDER_STATUS[4].label
      }
      if(status === MAINTENANCE_ORDER_STATUS[5].value){
        return MAINTENANCE_ORDER_STATUS[5].label
      }
      return '-'
    },
    clickItem(item) {
      this.$tab.navigateTo('/pages/maintenance/maintenance-order-detail?workOrderId=' + item.workOrderId)
    },
    reachBottom(){
      if(this.hasNext){
        this.pageNum ++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.maintenanceList= [...this.maintenanceList,...res.rows]
        })
      }
    },

    changeTime(e){
      this.pageNum = 1
      this.startTime = e.startTime ? dayjs(e.startTime).format('YYYY-MM-DD') : '';
      this.endTime = e.endTime ? dayjs(e.endTime).format('YYYY-MM-DD') : '';
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.maintenanceList= res.rows
      })
    },

    doQuery(){
      let params = {}
      //没有开始时间和结束时间
      if(!this.startTime && !this.endTime){
        params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          statusList: '4,5',
        }
      }
      //有开始时间或结束时间
      else{
        params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          statusList: '4,5',
          workOrderStartDate: this.startTime,
          workOrderEndDate: this.endTime
        }
      }
      if(this.$auth.hasRoleOr(['admin','co-admin', 'manager'])){
        return finishList(params).then(res => {
          return Promise.resolve(res)
        }).catch(() => {
          this.loading = false
        })
      }
      if(this.$auth.hasRole('engineer')){
        return myFinishList(params).then(res => {
          return Promise.resolve(res)
        }).catch(() => {
          this.loading = false
        })
      }
    },
    timeFormat(date, time){
      if(!date || !time){
        return '-'
      }
      return date + ' ' + time.split(':')[0] + ":" + time.split(':')[1]
    },
  },
}
</script>

<style scoped lang="scss">
.datePicker{
  margin: auto;
}
</style>
